$(function () {
	//游戏名称
	window.gameName = 'collect-sticker';
	//触摸点距离盒子的距离
	var box_x,box_y;
	//贴纸收集区的尺寸和位置
	var collect_w,collect_h,collect_top,collect1_left,collect2_left,collect3_left,collect4_left;
	// 卡片盒子的偏移量
	var box_left,box_top;
	//已经放好的卡片总数
	var totalCardNum = 0;
	//已经放进收集区的卡片
	var hasLaidType = {};

	//判断用户是否有抽奖(游戏)资格
	api.eligibleToPlay(uid, act_id, vote_token);
	//获取活动参数
	api.getGameConfig(act_id, gameName);

	//点击[开始捉鬼]按钮
	$('#startBtn').on('click',function () {
		$('#startPage').hide();
		$('#gamePage').show();
		//获取尺寸和偏移量
		var $collect = $('.collectItem');
		collect_w = $collect.width();
		collect_h = $collect.height();
		collect_top = $collect[0].offsetTop;
		collect1_left = $collect[0].offsetLeft;
		collect2_left = $collect[1].offsetLeft;
		collect3_left = $collect[2].offsetLeft;
		collect4_left = $collect[3].offsetLeft;
		box_left = $('#cardBox').offset().left;
		box_top = $('#cardBox').offset().top;
		gameBegin();
	});

	

	//给卡片绑定拖动事件
	$('#cardBox').on('touchstart','.card[canmove="1"]',function(e){
		e.preventDefault();
		var $this = $(this);
		var elm = $this.position();
		var typeNum = $this.data('type');
		$(this).css('opacity','0.3');
		$('#cardBox').append('<div style="left:'+elm.left+'px;top:'+elm.top+'px;" id="moveCard" data-type="'+typeNum+'"></div>')
		var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
		box_x = touch.pageX - elm.left;
		box_y = touch.pageY - elm.top;
	});
	$('#cardBox').on('touchmove','.card[canmove="1"]',function(e){
		e.preventDefault();
		var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
		$('#moveCard').css('left', touch.pageX - box_x + 'px');
		$('#moveCard').css('top', touch.pageY - box_y + 'px'); 
	});
	$('#cardBox').on('touchend','.card[canmove="1"]',function(e){
		e.preventDefault();
		var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
		var curX = touch.pageX - box_left;
		var curY = touch.pageY - box_top;
		var typeNum = $(this).data('type');
		if (curY>=collect_top && curY<=collect_top+collect_h) {
			if (curX>=collect1_left && curX<=collect1_left+collect_w) {
				var cardNum = $('#collectBox1>.card').length;
				if (cardNum == 0 && !hasLaidType[typeNum] || cardNum<4 && $('#collectBox1>.card').data('type') == typeNum) {
					$('#collectBox1').append('<div class="card" canmove="0" data-type="'+typeNum+'"></div>');
					$('#moveCard').remove();
					$(this).css('opacity','0').attr('canmove', '0');
					hasLaidType[typeNum] = true;
					totalCardNum++;
				} else {
					$('#failPage').show();
				};
				
			} else if (curX>=collect2_left && curX<=collect2_left+collect_w) {
				var cardNum = $('#collectBox2>.card').length;
				if (cardNum == 0 && !hasLaidType[typeNum] || cardNum<4 && $('#collectBox2>.card').data('type') == typeNum) {
					$('#collectBox2').append('<div class="card" canmove="0" data-type="'+typeNum+'"></div>');
					$('#moveCard').remove();
					$(this).css('opacity','0').attr('canmove', '0');
					hasLaidType[typeNum] = true;
					totalCardNum++;
				} else {
					$('#failPage').show();
				};
			} else if (curX>=collect3_left && curX<=collect3_left+collect_w) {
				var cardNum = $('#collectBox3>.card').length;
				if (cardNum == 0 && !hasLaidType[typeNum] || cardNum<4 && $('#collectBox3>.card').data('type') == typeNum) {
					$('#collectBox3').append('<div class="card" canmove="0" data-type="'+typeNum+'"></div>');
					$('#moveCard').remove();
					$(this).css('opacity','0').attr('canmove', '0');
					hasLaidType[typeNum] = true;
					totalCardNum++;
				} else {
					$('#failPage').show();
				};
			} else if (curX>=collect4_left && curX<=collect4_left+collect_w) {
				var cardNum = $('#collectBox4>.card').length;
				if (cardNum == 0 && !hasLaidType[typeNum] || cardNum<4 && $('#collectBox4>.card').data('type') == typeNum) {
					$('#collectBox4').append('<div class="card" canmove="0" data-type="'+typeNum+'"></div>');
					$('#moveCard').remove();
					$(this).css('opacity','0').attr('canmove', '0');
					hasLaidType[typeNum] = true;
					totalCardNum++;
				} else {
					$('#failPage').show();
				};
			} else {
				$('#moveCard').remove();
				$(this).css('opacity','1');
			};

			//游戏成功
			if (totalCardNum === 16) {
				$('#sucessPage').show();
			};
		} else {
			$('#moveCard').remove();
			$(this).css('opacity','1');
		};
	});

	//游戏开始
	window.gameBegin = function () {
		//次数减少一次
		limitNum--;
		//初始化
		totalCardNum = 0;
		hasLaidType = {};
		//生成卡片
		createCard();
	};

	//生成卡片,打乱顺序
	function createCard () {
		var typeArr = [1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4];
		typeArr.sort(function  (x, y) {
			return Math.random() - 0.5;
		});
		var len = typeArr.length;
		var html = '<div id="collectBox1" class="collectItem"></div><div id="collectBox2" class="collectItem"></div><div id="collectBox3" class="collectItem"></div><div id="collectBox4" class="collectItem"></div>';
		for (var i=0;i<len;i++) {
			html += '<div class="card" canmove="1" data-type="'+typeArr.shift()+'"></div>'
		};
		$('#cardBox').html(html);
	};
});


